<template>
	<view class="cell">
		<view class="cell-top">
			<image style="width:36rpx;height:36rpx;margin-top:6rpx;" src="https://oss.jxhecong.com/v2/image/xinyonghu@2x.png"></image>
			<view style="flex:1;margin-left:24rpx;">
				<view class="name">新用户优惠</view>
				<view style="font-size:24rpx;margin-top:24rpx;">可充电使用3次  丨  0.10元/次 </view>
				<view style="font-size:24rpx;margin-top:18rpx;">初次在站点充电用户专享</view>
			</view>
			<view class="count">3次</view>
		</view>
		<view class="cell-footer">
			<view class="flex" style="color:#303133;font-size:28rpx;">
				<text>仅限</text>
				<text class="address">上海阳光小区</text>
				<text> 站点使用  </text>
			</view>
			<view class="flex">
				<text style="color:#606266;font-size:28rpx;">去使用</text>
				<image style="width:24rpx;height:24rpx;" src="https://oss.jxhecong.com/v2/image/arrow_gray@2x.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			data:{
				type:Object,
				default:{}
			}
		},
		data(){
			return{
				
			}
		},
		methods:{
			
		}
	}
</script>

<style lang="scss" scoped>
	.cell{
		border-radius:18rpx;
		overflow: hidden;
	}
	.cell-top{
		height:160rpx;
		background-color:#F56161;
		padding:30rpx;
		color:#FFFFFF;
		display: flex;
		justify-content: space-between;
		.count{
			background-color:#EB4546;
			width:120rpx;
			height:42rpx;
			text-align: center;
			line-height:42rpx;
			color:#FFFFFF;
			font-size:28rpx;
			border-radius:21rpx;
		}
		.name{
			color:#FFFFFF;
			font-size:32rpx;
			font-weight: bold;
		}
	}
	.flex{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.cell-footer{
		background-color:#FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height:80rpx;
		padding:0rpx 30rpx;
	}
	.address{
		display: inline-block;
		color:#FA3534;
		font-weight: bold;
		margin-left:6rpx;
		margin-right:6rpx;
	}
</style>
